/*
 * @Author: liangliang
 * @Date: 2023-05-18 15:40:29
 * @LastEditors: yusha
 * @LastEditTime: 2023-08-25 10:14:43
 * @Description: 发布计划
 */

import React, { useState } from 'react';
import { useAntdTable } from 'ahooks';
import dayjs from 'dayjs';
import { Button, Form, Input, Row, message, Space, DatePicker, Table, Modal, Select, Col } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useFormModal } from '@/hooks/useFormModal';
import { publishPlanAdd, publishPlanEdit, publishPlanQryPage } from '@/config/request/manage';

import EditSupplierInfo from './module/EditSupplierInfo/index';
import './index.scss';

const SupplierList: React.FC = () => {
    const [form] = Form.useForm();
    const formModalSupplierInfo = useFormModal();
    const [rowItem, setRowItem] = useState<any>();
    const [isEditInfo, setIsEditInfo] = useState(false);

    const { tableProps, search } = useAntdTable(
        async ({ pageSize, current: pageNum }) => {
            const { publishDate } = form.getFieldsValue();
            const params = {
                ...form.getFieldsValue(),
                startTime: publishDate?.[0]?.format('YYYY-MM-DD 00:00:00'),
                endTime: publishDate?.[1]?.format('YYYY-MM-DD 23:59:59'),
                pageNum,
                pageSize,
                // supplierType
            };
            delete params.publishDate;
            const res = await publishPlanQryPage(params);
            return {
                total: res.data.data?.total ?? 0,
                list: res.data.data?.list ?? [],
            };
        },
        { defaultPageSize: 10, form }
    );

    const columns: ColumnsType<any> = [
        {
            title: '需求前缀',
            dataIndex: 'prefixDemandBug',
            key: 'prefixDemandBug',
            width: 5,
            // render: (text) => <span>{['P0', 'P1', 'P2', 'P3', 'P4', 'P5'][text]}</span>,
        },
        {
            title: '发布需求描述',
            dataIndex: 'demandPrdInfo',
            key: 'demandPrdInfo',
            width: 15,
            // render: (text) => <span>{['P0', 'P1', 'P2', 'P3', 'P4', 'P5'][text]}</span>,
        },

        {
            title: '需求类型',
            dataIndex: 'demandType',
            key: 'demandType',
            width: 5,
            // render: (text) => <span>{['P0', 'P1', 'P2', 'P3', 'P4', 'P5'][text]}</span>,
        },
        {
            title: '通知时间',
            dataIndex: 'infoTime',
            key: 'infoTime',
            width: 8,
            render: (text) => text === null ? text : dayjs(text).format('YYYY-MM-DD'),
        },
        {
            title: '是否通知技术',
            dataIndex: 'researchInformFlag',
            key: 'researchInformFlag',
            width: 4,
            // render: (text) => <span>{['P0', 'P1', 'P2', 'P3', 'P4', 'P5'][text]}</span>,
        },
        {
            title: '是否通知业务',
            dataIndex: 'businessInformFlag',
            key: 'businessInformFlag',
            width: 4,
            // render: (text) => <span>{['P0', 'P1', 'P2', 'P3', 'P4', 'P5'][text]}</span>,
        },

        {
            title: '开发负责人',
            dataIndex: 'mainDevelop',
            key: 'mainDevelop',
            width: 4,
        },
        {
            title: '测试负责人',
            dataIndex: 'testDevelop',
            key: 'testDevelop',
            width: 4,
        },
        // {
        //     title: '测试验证情况',
        //     dataIndex: 'testCheckStatus',
        //     key: 'testCheckStatus',
        //     width: 5,
        //     render: (text: string) => {
        //         if (text === '待测试') {
        //             return <span style={{ color: 'red' }}>{[text]}</span>;
        //         }
        //         if (text === '已测试') {
        //             return <span style={{ color: 'green' }}>{[text]}</span>;
        //         }
        //         return <span style={{ color: 'black' }}>{text}</span>;

        //     },
        //     // render: (text) => <span>{['P0', 'P1', 'P2', 'P3', 'P4', 'P5'][text]}</span>,
        // },
        {
            title: '发布状态',
            dataIndex: 'publishFlag',
            key: 'publishFlag',
            width: 5,
            render: (text: string) => {
                if (text === '待发布') {
                    return <span style={{ color: 'blue' }}>{[text]}</span>;
                }
                if (text === '已发布') {
                    return <span style={{ color: 'green' }}>{[text]}</span>;
                }
                if (text === '暂停发布') {
                    return <span style={{ color: 'red' }}>{[text]}</span>;
                }
                return <span style={{ color: 'black' }}>{text}</span>;
            },
        },
        {
            title: '需求/缺陷地址',
            dataIndex: 'demandBugYunxiaoUrl',
            key: 'demandBugYunxiaoUrl',
            width: 20,
            // render: (text) => <span>{['P0', 'P1', 'P2', 'P3', 'P4', 'P5'][text]}</span>,
        },
        {
            title: '开发分支',
            dataIndex: 'gitBranch',
            key: 'gitBranch',
            width: 20,
            // render: (text) => <span>{['P0', 'P1', 'P2', 'P3', 'P4', 'P5'][text]}</span>,
        },

        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width: 20,
            // render: (text) => <span>{['P0', 'P1', 'P2', 'P3', 'P4', 'P5'][text]}</span>,
        },

        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 10,
            render: (text) => text === null ? text : dayjs(text).format('YYYY-MM-DD'),
        },
        {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 10,
            render: (_: any, record: any) => {
                return (
                    <Space size="middle" className="flex-col">
                        <Button
                            type="link"
                            size="small"
                            onClick={() => {
                                setRowItem(record);
                                setIsEditInfo(true);
                                formModalSupplierInfo.modal.open();
                            }}
                        >
                            修改
                        </Button>
                    </Space>
                );
            },
        },
    ];

    // 新增/修改需求信息
    const editSupplierInfo = async () => {
        try {
            const params = await formModalSupplierInfo.form.validateFields();

            console.log(params.demandReviewDate);

            params.serviceName = params.serviceName?.join(',');
            params.infoTime = params.infoTime ? dayjs(params.infoTime).format('YYYY-MM-DD 00:00:00') : '';

            const response = isEditInfo ?
                await publishPlanEdit({
                    ...rowItem,
                    ...params,
                }) :
                await publishPlanAdd(params);
            if (response.data.code === 200) {
                message.success('保存成功！');
                formModalSupplierInfo.modal.close();
                search.submit();
            }
        } catch (error: any) {
            console.log(error);
        }
    };

    return (
        <div className="bg-white p-2.5">
            <Form form={form} name="supplierList_search">
                <Row>
                    <Col span={6}>
                        <Form.Item label="需求/缺陷名称" name="demandBugName">
                            <Input placeholder="请输入" allowClear />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item label="服务名称" name="serviceName">
                            <Select
                                placeholder="请选择"
                                options={[
                                    // { label: 'order', value: 'order' },
                                    // { label: 'purchase', value: 'purchase' },
                                    // { label: 'settlement', value: 'settlement' },
                                    // { label: 'wms', value: 'wms' },
                                    // { label: 'user', value: 'user' },
                                    // { label: 'product', value: 'product' },
                                    { label: '订单', value: '订单' },
                                    { label: '采购', value: '采购' },
                                    { label: '结算', value: '结算' },
                                    { label: '用户', value: '用户' },
                                    { label: '仓库', value: '仓库' },
                                    { label: '商品', value: '商品' },
                                    {label: '直营商城', value: '直营商城' },
                                    { label: '营销', value: '营销' },
                                    { label: 'API', value: 'API' },
                                    { label: '前端', value: '前端' },
                                    { label: '其他', value: '其他' },
                                ]}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item label="发布状态" name="publishFlag">
                            <Select
                                placeholder="请选择"
                                options={[
                                    { label: '全部', value: '' },
                                    { label: '待发布', value: '待发布' },
                                    { label: '已发布', value: '已发布' },
                                    { label: '暂停发布', value: '暂停发布' },
                                ]}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="创建日期" name="publishDate">
                            <DatePicker.RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
                        </Form.Item>
                    </Col>

                    <br />
                    <br />

                    <Col span={24} style={{ textAlign: 'right' }}>
                        <Form.Item>
                            <Space size="small">
                                <Button type="primary" htmlType="submit" onClick={search.submit}>
                                    搜索
                                </Button>
                                <Button type="primary" onClick={search.reset}>
                                    重置
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
                <div style={{ textAlign: 'left', marginBottom: 16 }}>
                    <Button
                        type="primary"
                        className="mt-5 mb-5"
                        onClick={() => {
                            setIsEditInfo(false);
                            setRowItem({});
                            formModalSupplierInfo.modal.open();
                        }}
                    >
                        发布计划
                    </Button>
                </div>

                <Table
                    {...tableProps}
                    bordered
                    columns={columns}
                    rowKey="publishPlanId"
                    locale={{ emptyText: '暂无数据' }}
                    pagination={{ ...tableProps.pagination, showQuickJumper: true, showTotal: (total) => `总计 ${total} ` }}
                    scroll={{ x: 'calc(100vw + 1000px)' }}
                />
            </Form>
            <Modal
                width={1200}
                destroyOnClose
                open={formModalSupplierInfo.isOpen}
                onOk={() => editSupplierInfo()}
                onCancel={() => {
                    formModalSupplierInfo.modal.close();
                }}
                title={isEditInfo ? '修改发布计划' : '新增发布计划'}
                className="supplierInfoModal"
                okText="确定"
                cancelText="取消"
                maskClosable={false}
            >
                <EditSupplierInfo formModal={formModalSupplierInfo} rowItem={rowItem} />
            </Modal>
        </div>
    );
};

export default SupplierList;
